// 该文件专门用于创建整个应用的路由器
import Vue from 'vue';
import VueRouter from 'vue-router'
Vue.use(VueRouter)
    // 引入组件
import Home from '../pages/Home'
import Login from '../pages/Login'
import Register from '../pages/Register'
import Search from '../pages/Search'
import Detail from '../pages/Detail'
import AddCartSuccess from '../pages/AddCartSuccess'
import ShopCart from '../pages/ShopCart'
import Trade from '../pages/Trade'
import Pay from '../pages/Pay'
// 引入仓库
import store from '../store'

// 先把VueRouter原型对象的push，先保存一份
let originPush = VueRouter.prototype.push;
// 重写push|replace
// 为什么要重写push|replace
// 1)编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出
// 第一个参数：告诉原来的push方法，你往哪里跳转（传递哪些参数）
VueRouter.prototype.push = function(location, resolve, reject) {
        if (resolve && reject) {
            // call||apply区别 相同点，都可以调用函数一次，都可以篡改函数的上下文一次
            // 不同点 call传递参数用逗号隔开，apply传递数组
            originPush.call(this, location, resolve, reject)
        } else {
            originPush.call(this, location, () => {}, () => {})
        }
    }
    // router 规则: /class => 班级组件
    // 创建一个路由器
let router = new VueRouter({
    routes: [{
            path: "/shopcart",
            component: ShopCart,
            meta: {
                showFooter: true
            }
        },
        // 详情页 
        {
            path: "/detail/:skuId",
            component: Detail,
            meta: {
                showFooter: true
            }
        },
        // AddCartSuccess 添加到购物车
        {
            path: "/addCartSuccess",
            name: 'addCartSuccess',
            component: AddCartSuccess,
            meta: {
                showFooter: true
            }
        },
        // 支付页面
        {
            path: '/trade',
            name: 'trade',
            component: Trade,
            meta: {
                showFooter: true
            }
        },
        // 支付
        {
            path: '/pay',
            name: 'pay',
            component: Pay,
            meta: {
                showFooter: true
            }
        },
        {
            path: "/home",
            component: Home,
            meta: {
                showFooter: true
            }
        },
        {
            path: "/login",
            component: Login,
            meta: {
                showFooter: false
            }
        },
        {
            // param传参
            // path: "/search/:keyword",
            // query传参不用添加占位
            path: "/search/:keyword?",
            component: Search,
            name: 'search',
            meta: {
                showFooter: true
            },
            // props: true
            // 对象写法：可以额外传递一些参数给路由
            props: {
                a: 1,
                b: 2
            },
            // 函数写法：可以把params参数，query参数，通过props传递给路由组件
            props: ($route) => {
                return {
                    keyword: $route.params.keyword,
                    k: $route.query.k
                }
            }
        },
        {
            path: "/register",
            component: Register,
            meta: {
                showFooter: false
            }
        },
        // 重定向，在项目跑起来的时候，访问/,立马让他定向到首页
        {
            path: '*',
            redirect: "/home"
        },

    ],
    // 滚动行为
    scrollBehavior(to, from, savedPosition) {
        return { y: 0 }
    }
})

// 路由守卫
router.beforeEach(async(to, from, next) => {
    // to 去 from 来自 next 滚
    // next()
    let token = store.state.user.token
    let userName = store.state.user.userInfo.name
    if (token) {
        // 登录之后禁止跳到登录页
        if (to.path == '/login' || to.path == '/register') {
            next('/')
        } else {
            // 登录之后 
            if (name) {
                // 如果有用户信息
                next()
            } else {
                // 刷新会导致没有用户信息，需要派发action让仓库存储信息再跳转
                try {
                    await store.dispatch("getUserInfo")
                    next()
                } catch (error) {
                    // token过期 清除token 跳动登录页
                    console.log(error);
                    await store.dispatch("reqLogout")
                    next('/login')
                }
            }
            next()
        }
    } else {
        // 未登录 
        next()
    }

});

export default router